<template>
  <div id="outer">
    <h1>管理系统</h1>
    <span>学校名称：{{schoolName}}</span>
    &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
    <span >学生姓名：{{studentName}}</span>
    <School  @getSchoolName='getSchoolName' />
    <hr>
    <Student @getStudentName='getStudentName'/>
  </div>
</template>

<script>
import School from './components/school';
import Student from './components/student'

export default {
  name:'App',
  components:{
    School,
    Student
  },
  data(){
    return{
      schoolName:'',
      studentName:''
    }
  },
  methods:{
    getSchoolName(schoolName){
      console.log(schoolName);
      this.schoolName = schoolName
      
    },
    getStudentName(studentName){
      console.log(studentName);
      this.studentName=studentName
    }
  }
}
</script>

<style>
  #outer{
    background-color: antiquewhite;
    width: 700px;
    height: 500px;
    margin: 0 auto;
  }
</style>